<template>
  <div class="main_left column-flex">
    <!--  上  -->
    <div class="box module-top">
      <!-- 标题 -->
      <h1 class="left-title">网络资产概览</h1>
      <!--      <template @mouseover="handleMouseover" @mouseleave="handleMouseleave">-->
      <div
        class="left-cont flex border-top-linear border-bottom-linear border-color"
      >
        <div class="left-cont-l">
          <internetList style="width: 100%" :data="internetData"></internetList>
        </div>
        <div class="left-cont-r" v-if="internetAllData.length > 1">
          <i class="el-icon el-icon-arrow-up" @click="handleUp"></i>
          <i class="el-icon el-icon-arrow-down" @click="handleDown"></i>
        </div>
      </div>
      <div class="flex left-count">
        <bg-list
          class="left-count-list"
          v-for="(item, index) in importData"
          :key="index"
          :importData="item"
          @handleClick="(item) => handleClickInternet(item, index)"
        ></bg-list>
      </div>
      <!--      </template>-->
    </div>
    <!--  中  -->
    <div class="box module-middle">
      <h1 class="left-title">网络安全重点关注项</h1>
      <div class="left-concern flex" style="">
        <div
          class="concernlists"
          v-for="(item, index) in imgItems"
          :key="index"
        >
          <SafeConcernsList
            :data="item"
            @handleImgItems="handleImgItems"
          ></SafeConcernsList>
        </div>
      </div>
    </div>
    <!--  下  -->
    <div class="box module-bottom">
      <h1 class="left-title">
        运行安全事件趋势<span
          ><el-checkbox v-model="checked" @change="handleChecked"
            >展示其他监管事件</el-checkbox
          ></span
        >
      </h1>
      <div class="flex" style="margin-top: 1.4rem; height: calc(100% - 3.2rem)">
        <lineEcharts
          ref="lineEchartRef"
          @handleClick="handleLineClick"
        ></lineEcharts>
      </div>
    </div>
    <!--   资产弹窗  -->
    <searchDialog
      ref="assetsDialogRef"
      title="设备列表"
      :operateOpen="
        assetsType == 'assets_host' || assetsType == 'assets_server'
      "
      operateName="进入画像"
      :searchFormObj="assetsFormObj"
      :tableList="assetsTableList"
      :tableData="assetsTableData.tableData"
      :total="assetsTableData.assetTotal"
      @getTableList="getAssetsTableList"
      :totalInfo="safeConcernsoTalInfo"
      @operateEvent="operateAssetsEvent"
      :show-total-info="true"
    ></searchDialog>
    <!--   安全保密事件统计  -->
    <searchDialog
      ref="safeConcernsDialogRef"
      title="事件列表"
      :operateOpen="true"
      :searchFormObj="imgFormObj"
      :tableList="imgTableData.imgTableList"
      :tableData="imgTableData.tableData"
      :total="imgTableData.total"
      @getTableList="getsafeConcernTableList"
      @operateEvent="operateEvent"
    ></searchDialog>
  </div>
</template>

<script>
import internetList from "@/components/common/InternetList";
import BgList from "@/components/common/BgList";
import SafeConcernsList from "@/components/common/SafeConcernsList.vue";
import lineEcharts from "@/components/echarts/comprehensiveSituation/LineEcharts.vue";
import {
  safetySituation,
  safetyTrend,
  networkAssetsOverview,
  dictQuery,
  assetsTableList,
  totalData,
} from "@/api/comprehensiveSituation";
import { groupTag, eventList } from "@/api/confidentialitySupervision.js";
import searchDialog from "@/components/common/searchDialog";
import obj from "@/components/index/comprehensiveSituation/components/tableData/index.js";
import { cloneDeep } from "@/utils/loadash-es";
import { parseTime } from "@/utils/hongke";
import { mapState } from "vuex";
import Obj from "@/components/index/assetSituation/components/tableData";

export default {
  components: {
    internetList,
    BgList,
    SafeConcernsList,
    lineEcharts,
    searchDialog,
  },
  data() {
    return {
      total: 500,
      checked: false,
      currentInternetIndex: 0,
      internetAllData: [],
      internetData: {
        title: "xx部SM网络",
        list: [
          { name: "网路类型", value: "涉密网路" },
          { name: "涉密等级", value: "涉密网路" },
          {
            name: "防护等级",
            value: "涉密网路",
          },
          { name: "测评状态", value: "已过测" },
        ],
      },
      importData: [
        { title: "终端", count: 0 },
        { title: "服务器", count: 0 },
        { title: "网络设备", count: 0 },
        { title: "安全保密产品", count: 0 },
        { title: "应用软件", count: 0 },
      ],
      imgItems: [
        {
          name: "服务异常/攻击",
          code: "200",
          type: "event_type",
          count: "-",
          img: "img_router.png",
          company: "次",
        },
        {
          name: "边界异常",
          code: "400",
          type: "event_type",
          count: "-",
          img: "img_firewall.png",
          company: "次",
        },
        {
          name: "外联阻断",
          code: "1",
          type: "event_type",
          count: "-",
          img: "img_safe.png",
          company: "次",
        },
        {
          name: "入网未知设备",
          code: "2",
          type: "event_type",
          count: "-",
          img: "img_internet.png",
          company: "台",
        },
      ],
      queryParams: {
        searchType: this.$store.state.searchType || "3",
      },
      trendAllData: {},
      trendDefaultData: {},
      assetsTableData: {
        assetTotal: 0,
        tableData: [],
      },
      assetsTableList: cloneDeep(obj.assetsTableList),
      // 网络安全重点关注项-弹窗信息
      imgTableData: {
        imgTableList: cloneDeep(obj.imgTableList),
        tableData: [],
        total: 0,
      },
      safeConcernsoTalInfo: [
        { name: "终端（台）", value: "1570" },
        { name: "涉密转计算机（台）", value: "1570" },
        { name: "国产通用计算机（台）", value: "1570" },
        { name: "终端（台）", value: "1570" },
        { name: "涉密转计算机（台）", value: "1570" },
        { name: "国产通用计算机（台）", value: "1570" },
        { name: "终端（台）", value: "1570" },
        { name: "涉密转计算机（台）", value: "1570" },
        { name: "国产通用计算机（台）", value: "1570" },
      ],
      // 资产类型
      assetsType: "",
      asset_loop_timer: null,
      //   运行安全事件3秒循环
      operationSafety_loop_timer: null,
    };
  },
  computed: {
    ...mapState(["searchType"]),
    // 网络安全重点关注项-弹窗信息
    imgFormObj: {
      get() {
        return {
          fieldList: cloneDeep(Obj.importantFormObj.fieldList),
          searchData: {},
          btnHidden: true,
          //  是否有额外的参数
          isNeedResetExtraParam: false,
          listTypeInfo: {
            levelCodeList: this.$store.state.levelCodeList,
            categoryCodeList: this.$store.state.categoryCodeList,
            typeCodeList: this.$store.state.typeCodeList,
            protectCodeList: this.$store.state.protectCodeList,
            disposalStatusList: [
              {
                label: "未处置 ",
                value: 0,
              },
              {
                label: "已处置 ",
                value: 1,
              },
            ],
          },
        };
      },
      set() {},
    },
    //资产概览弹窗信息
    // 资产概览
    assetsFormObj: {
      get() {
        return {
          fieldList: cloneDeep(Obj.assetsFormObj.fieldList),
          searchData: {},
          btnHidden: true,
          //  是否有额外的参数
          isNeedResetExtraParam: false,
          listTypeInfo: {
            equipmentStatusList: this.$store.state.equipmentStatusList,
            useStatusList: this.$store.state.useStatusList,
            secLevelList: this.$store.state.secLevelList,
            equipmentTypeList: this.$store.state.equipmentTypeList,
          },
        };
      },
      set() {},
    },
  },
  watch: {
    searchType: {
      handler(val) {
        this.queryParams.searchType = val;
        this.getAllData();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.dataLoop();
  },
  methods: {
    // 进入画像
    operateAssetsEvent(data) {
      window.open(window.urlPrefix + "dispose/entityPortrait/" + data.row.id);
    },
    getAllData() {
      this.getSafetySituation();
      this.getSafetyTrend();
      this.getNetworkAssets();
    },
    // 网络资产概览
    // networkAssetsOverview
    getNetworkAssets() {
      networkAssetsOverview(this.queryParams).then((res) => {
        this.internetAllData = res;
        this.setInternetData(this.internetAllData, 0);
        this.setImportData(this.internetAllData, 0);
      });
    },
    // 上一条数据
    handleUp() {
      if (this.currentInternetIndex <= 0) {
        this.currentInternetIndex = this.internetAllData.length - 1;
      } else {
        this.currentInternetIndex -= 1;
      }
      this.setInternetData(this.internetAllData, this.currentInternetIndex);
      this.setImportData(this.internetAllData, this.currentInternetIndex);
    },
    // 下一条数据
    handleDown() {
      if (this.currentInternetIndex >= this.internetAllData.length - 1) {
        this.currentInternetIndex = 0;
      } else {
        this.currentInternetIndex += 1;
      }
      this.setInternetData(this.internetAllData, this.currentInternetIndex);
      this.setImportData(this.internetAllData, this.currentInternetIndex);
    },
    // 赋值网络资产概览的上部分
    setInternetData(data, index) {
      this.internetData = {
        id: data[index]?.id,
        title: data[index]?.netName,
        list: [
          {
            value: data[index]?.netType,
          },
          {
            value: data[index]?.secLevelName,
          },
          {
            value: data[index]?.protectionName,
          },
          {
            value: data[index]?.statusName,
          },
        ],
      };
    },
    // 赋值网络资产概览的下部分
    setImportData(data, index) {
      this.importData.forEach((i, ix) => {
        switch (ix) {
          case 0:
            this.importData[ix].count = data[index]?.hostTotal;
            break;
          case 1:
            this.importData[ix].count = data[index]?.serverTotal;
            break;
          case 2:
            this.importData[ix].count = data[index]?.netTotal;
            break;
          case 3:
            this.importData[ix].count = data[index]?.secTotal;
            break;
          case 4:
            this.importData[ix].count = data[index]?.softTotal;
            break;
        }
      });
    },
    // 轮播展示数据
    dataLoop() {
      /*      this.asset_loop_timer=setInterval(()=>{
        this.handleDown()
      },20000);*/
      // this.operationSafety_loop_timer=setInterval(()=>{
      //   this.getSafetyTrend();
      // },3000)
    },
    // 网络安全重点关注项
    getSafetySituation() {
      safetySituation(this.queryParams).then((res) => {
        if (res.length > 0) {
          this.imgItems.forEach((item) => {
            item.count = "-";
            res.forEach((i, index) => {
              if (item.code == i.code && i.code != "100" && i.code != "300") {
                item.count = i.count;
              }
            });
          });
        }
      });
    },
    // 折线图数据获取  运行安全事件趋势
    getSafetyTrend() {
      safetyTrend(this.queryParams).then((res) => {
        let labels = [];
        if (res.vals.length > 0) {
          labels = res.vals.map((i) => {
            return i.name;
          });
          this.trendAllData = {
            xAxisData: res.xAxisData,
            labels: labels,
            value: res.vals,
          };
          this.trendDefaultData = {
            xAxisData: res.xAxisData,
          };
          this.trendDefaultData.value = res.vals.filter((i) => {
            return i.code == "200" || i.code == "400";
          });
          this.trendDefaultData.labels = this.trendDefaultData.value.map(
            (i) => {
              return i.name;
            }
          );
          if (this.checked && this.trendAllData) {
            this.$refs.lineEchartRef.getData(this.trendAllData);
          } else {
            this.$refs.lineEchartRef.getData(this.trendDefaultData);
          }
        }
      });
    },
    /** 运维安全事件趋势---复选框点击事件 */
    handleChecked(value) {
      if (value && this.trendAllData) {
        this.$refs.lineEchartRef.getData(this.trendAllData);
      } else {
        this.$refs.lineEchartRef.getData(this.trendDefaultData);
      }
    },
    /**  网络资产概览 */
    async handleClickInternet(data, index) {
      switch (data.title) {
        case "终端":
          this.assetsType = "assets_host";
          break;
        case "服务器":
          this.assetsType = "assets_server";
          break;
        case "网络设备":
          this.assetsType = "assets_net_equipment";
          break;
        case "安全保密产品":
          this.assetsType = "assets_sec_product";
          break;
        case "应用软件":
          this.assetsType = "assets_software_system";
          break;
      }
      this.queryAssetsTableList({
        netId: this.internetData.id,
        assetsType: this.assetsType,
        current: 1,
        size: 10,
      });
      let result = await this.getTotalData({ assetsType: this.assetsType });
      this.safeConcernsoTalInfo = [];
      if (result) {
        this.safeConcernsoTalInfo.push({
          name: data.title,
          value: result?.all?.num || "",
        });
        let subNum = [];
        if (result.typeList.length > 0) {
          subNum = result.typeList.map((i) => {
            return { name: i?.name, value: i?.num };
          });
        }
        this.safeConcernsoTalInfo.push.apply(this.safeConcernsoTalInfo, subNum);
      }
      this.assetsFormObj.searchData = {
        netId: this.internetData.id,
        assetsType: this.assetsType,
      };
      let _self = this;
      setTimeout(function () {
        _self.$refs.assetsDialogRef.open = true;
      }, 200);
    },
    /** 点击网络安全重点关注项 - 显示弹窗 */
    handleImgItems(item) {
      if (item.code != 2 && item.code != 1) {
        this.queryEventList({ typeCode: item.code, ...this.queryParams });
        this.imgFormObj.searchData = {
          typeCode: item.code,
          ...this.queryParams,
        };
        let _self = this;
        setTimeout(function () {
          _self.$refs.safeConcernsDialogRef.open = true;
        }, 500);
      }
    },
    /**  运维安全事件趋势--显示弹窗 */
    handleLineClick(params) {
      this.$refs.safeTrendDialogRef.open = true;
    },
    /** 获取统计信息 */
    async getTotalData(query) {
      let res = await totalData(query);
      return res;
    },
    /** 资产列表查询 */
    queryAssetsTableList(query) {
      assetsTableList(Object.assign(query)).then((res) => {
        this.assetsTableData.assetTotal = res.total;
        this.assetsTableData.tableData = res.list;
      });
    },
    /** 网络安全重点关注项列表查询 */
    queryEventList(query) {
      eventList(query).then((res) => {
        this.imgTableData.total = res.total;
        this.imgTableData.tableData = res.list;
      });
    },
    /** 资产列表查询 */
    safeTableList(query) {
      assetsTableList(query).then((res) => {
        this.assetsTableData = res.list;
      });
    },
    /** 网络资产概览 - 搜索 */
    getAssetsTableList(data) {
      this.queryAssetsTableList(
        Object.assign({}, data, this.assetsFormObj.searchData)
      );
    },
    /**  网络安全重点关注项 */
    getsafeConcernTableList(data) {
      if (data?.time) {
        data.time.forEach((i, index) => {
          data.time[index] = parseTime(i, "{y}-{m}-{d}T{h}:{i}:{s}");
        });
      }
      this.queryEventList(data);
    },

    /**  网络安全重点关注项---弹窗详情 */

    operateEvent(val) {
      window.open(
        window.urlPrefix + "dispose/incidentHandle/detail?id=" + val.row.id
      );
    },
    /** 鼠标移入移出 */
    /*   handleMouseover(){
      // clearInterval(this.asset_loop_timer);
      clearInterval(this.operationSafety_loop_timer)
    },
    handleMouseLeave() {
      this.dataLoop();
    }*/
  },
  destroyed() {
    // clearInterval(this.asset_loop_timer)
    // clearInterval(this.operationSafety_loop_timer)
  },
};
</script>

<style lang="scss" scoped>
.box {
  overflow: hidden;
}

.container {
  height: 90%;
  flex-wrap: wrap;
  padding: 0 1rem 1rem 1rem;

  .container-title {
    width: 100%;
    background: linear-gradient(to right, #1a3e9b, transparent);
    padding: 0.4rem;
    display: flex;
    align-items: center;

    .con-title-border {
      width: 0.2rem;
      height: 1.2rem;
      background: #01f1ff;
      display: inline-block;
      margin-right: 0.4rem;
    }

    .con-title-tit {
      flex: 2;
      text-align: left;
    }

    .con-title-count {
      flex: 1;
      font-size: 1.4rem;
      color: #01f1ff;
      font-weight: 900;
    }

    .con-title-ring {
      .color-red {
        color: #f01515;
      }
    }
  }
}

.left-title {
  span {
    float: right;
  }
}

.left-cont {
  width: 100%;
  height: 40%;
  border-radius: 0.4rem;
  align-items: flex-start;
  justify-content: space-around;

  .left-cont-l {
    height: 100%;
    width: 90%;
  }

  .left-cont-r {
    margin-top: 1rem;
    heigth: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .el-icon {
      cursor: pointer;
      padding: 0.2rem;
      border-radius: 0.2rem;
      margin-bottom: 0.2rem;
      border: 1px solid rgba(59, 139, 255, 0.6);
    }
  }
}

.left-count {
  height: 48%;
  padding: 1.2rem 0;
  flex-wrap: wrap;
  overflow: hidden;

  .left-count-list {
    width: 33%;
    height: 50%;
    cursor: pointer;
    border-right: 1px solid rgba(59, 139, 255, 0.6);
    margin-bottom: 0.4rem;

    &:nth-of-type(3n),
    &:nth-last-of-type(1) {
      border-right: 1px solid transparent;
    }
  }
}

.module-top {
  height: 40% !important;
}

.module-middle {
  height: 25% !important;
}

.module-bottom {
  height: 30% !important;
}

.left-concern {
  flex-wrap: wrap;
  justify-content: space-around;

  .concernlists {
    width: 48%;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    background: #0f1b7a;
    height: 47%;
    border-radius: 10px;
    background: rgba(59, 139, 255, 0.1);
    margin-bottom: 0.8rem;
  }
}

::v-deep .el-button {
  background: rgba(59, 139, 255, 0.2) !important;
  border: 1px solid rgba(59, 139, 255, 0.2) !important;
  border-radius: 2px !important;
  color: #3e94fe !important;

  &:hover {
    background: rgba(0, 225, 228, 0.2) !important;
    border: 1px solid rgba(0, 225, 228, 0.6) !important;
    border-radius: 2px !important;
    color: #00e1e4 !important;
  }
}
</style>
